<template>
  <div class="wrap offlineContent">
    <div class="search">
      <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
        <el-form-item label="预约号" prop="orderNum">
          <el-input v-model="formInline.orderNum" size="small" placeholder="请输入预约号"></el-input>
        </el-form-item>
        <el-form-item label="申请人名" prop="name">
          <el-input v-model="formInline.name" size="small" placeholder="请输入申请人名"></el-input>
        </el-form-item>
        <!-- <el-form-item label="办理状态" prop="commitStatus">
          <el-select v-model="formInline.commitStatus" size="small" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <!-- <el-form-item label="时间选择">
          <time-scope size="small" @receiptTime="storeTime" :vals="formInline.valNum"></time-scope>
        </el-form-item>-->
        <el-form-item class="time" label="时间选择">
          <el-date-picker
            :clearable="false"
            v-model="valNumDate"
            type="daterange"
            style="width:250px"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit">搜索</el-button>
          <el-button type="info" size="small" @click="resetForm('formInline')">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="add-num" v-if="this.activeName == 1">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="newph.newAppointment = true"
        >新增排号</el-button>
      </div>
    </div>

    <div class="list">
      <el-tabs type="border-card" v-model="activeName" @tab-click="val">
        <el-tab-pane label="代办结" name="1">
          <el-table class="table" :data="tableData" style="width: 100%">
            <el-table-column align="center" label="序号" type="index"></el-table-column>
            <!-- <el-table-column prop="dan_number" label="单号" width="150"></el-table-column> -->
            <el-table-column align="center" prop="name" label="申请人姓名"></el-table-column>
            <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
            <el-table-column align="center" prop="submit_time" label="预约时间"></el-table-column>
            <el-table-column prop="business_number" label="业务个数" align="center"></el-table-column>
            <el-table-column align="center" label="办理状态" width="150">
              <template slot-scope="scope">
                <p v-if="scope.row.commitStatus == 1">待办理</p>
                <p v-if="scope.row.commitStatus == 2">已办理</p>
                <p v-if="scope.row.commitStatus == 3">已跳过</p>
              </template>
            </el-table-column>
            <el-table-column prop="order_number" label="预约号码" align="center"></el-table-column>
            <el-table-column prop="operate" label="操作" align="center" width="260">
              <template slot-scope="scope">
                <div class="operations">
                  <el-link
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row, false , 2)"
                    icon="el-icon-document-checked"
                  >办结</el-link>
                  <el-link
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row, false, 3)"
                    icon="el-icon-document-delete"
                  >跳过</el-link>
                  <el-link
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row, true)"
                    icon="el-icon-document"
                  >查看业务</el-link>
                  <el-link
                    type="danger"
                    @click="handleEditDelet(scope.$index, scope.row)"
                    icon="el-icon-delete"
                  >删除</el-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已办结" name="2">
          <el-table class="table" :data="tableDatas" style="width: 100%">
            <el-table-column label="序号" type="index"></el-table-column>
            <!-- <el-table-column prop="dan_number" label="单号" width="150"></el-table-column> -->
            <el-table-column align="center" prop="name" label="申请人姓名"></el-table-column>
            <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
            <el-table-column align="center" prop="submit_time" label="预约时间"></el-table-column>
            <el-table-column align="center" prop="business_number" label="业务个数"></el-table-column>
            <el-table-column align="center" label="办理状态">
              <template slot-scope="scope">
                <p v-if="scope.row.commitStatus == 1">待办理</p>
                <p v-if="scope.row.commitStatus == 2">已办理</p>
                <p v-if="scope.row.commitStatus == 3">已跳过</p>
              </template>
            </el-table-column>
            <el-table-column prop="order_number" label="预约号码" align="center"></el-table-column>
            <el-table-column prop="operate" label="操作" align="center" width="260">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row, true)"
                  icon="el-icon-document"
                >查看业务</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="跳过项" name="3">
          <el-table class="table" :data="tableDataJump" style="width: 100%">
            <el-table-column align="center" label="序号" type="index"></el-table-column>
            <!-- <el-table-column prop="dan_number" label="单号" width="150"></el-table-column> -->
            <el-table-column align="center" prop="name" label="申请人姓名"></el-table-column>
            <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
            <el-table-column align="center" prop="submit_time" label="预约时间"></el-table-column>
            <el-table-column prop="business_number" label="业务个数" align="center"></el-table-column>
            <el-table-column align="center" label="办理状态">
              <template slot-scope="scope">
                <p v-if="scope.row.commitStatus == 1">待办理</p>
                <p v-if="scope.row.commitStatus == 2">已办理</p>
                <p v-if="scope.row.commitStatus == 3">已跳过</p>
              </template>
            </el-table-column>
            <el-table-column prop="order_number" label="预约号码" align="center"></el-table-column>
            <el-table-column prop="operate" label="操作" align="center" width="200">
              <template slot-scope="scope">
                <div class="operations">
                  <el-link
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row, false , 2)"
                    icon="el-icon-document-checked"
                  >办结</el-link>
                  <el-link
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row, true)"
                    icon="el-icon-document"
                  >查看业务</el-link>
                  <el-link
                    type="primary"
                    @click="handleEditDelet(scope.$index, scope.row)"
                    icon="el-icon-delete"
                  >删除</el-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 新增排号对话框 -->
        <el-dialog title="新增排号" :visible.sync="newph.newAppointment" width="45%" destroy-on-close>
          <el-form
            :model="newph.newdata"
            ref="newph.newdata"
            label-width="120px"
            class="demo-newph"
          >
            <div class="xzphFormContent">
              <el-form-item label="证件类型">
                <el-input v-model="newph.newdata.type" disabled style="width:50%"></el-input>
              </el-form-item>
              <!-- 上传证件 -->
              <el-form-item label="点击扫描证件" required>
                <el-button type="primary" @click="readidcard">点击扫描</el-button>
                <div class="s-imgs">
                  <div class="imgs-top">
                    <!-- <img :src="newph.newdata.imgtop" alt /> -->
                  </div>
                  <div class="imgs-bottom">
                    <img :src="newph.newdata.imgbottom" alt />
                  </div>
                </div>
              </el-form-item>
            </div>
          </el-form>
          <p
            style="color:#f00;
            font-size:12px;
            line-height:20px;
            margin:20px auto;
            width:100%;
            text-align:center
            "
          >如果无法扫描，请点击确定进入下一步手动填写信息</p>
          <span slot="footer" class="dialog-footer">
            <el-button @click="newph.newAppointment = false">取 消</el-button>
            <el-button type="primary" @click="newadd">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 排号对话框第二步 -->
        <el-dialog
          class="dialogBox"
          title="新增排号"
          :visible.sync="newph.second"
          width="45%"
          top="50px"
          destroy-on-close
        >
          <el-form ref="alertForm" :rules="offlineFormRules" :model="newph.form">
            <el-form-item label="名称" prop="name" label-width="80px">
              <el-input v-model="newph.form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard" label-width="80px">
              <el-input v-model="newph.form.idnumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone" label-width="80px">
              <el-input v-model="newph.form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码"  label-width="80px">
              <el-input v-model="newph.form.mailnumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址"  label-width="80px">
              <el-input v-model="newph.form.site" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电子邮件"  label-width="80px">
              <el-input v-model="newph.form.email" autocomplete="off"></el-input>
            </el-form-item>
            <div class="bussi-box">
              <el-form-item required label="业务选择">
                <br />
                <el-checkbox-group v-model="newph.types">
                  <div class="form-layer" v-for="(item, index) in options" :key="index">
                    <el-checkbox :label="item">{{ item.name }}</el-checkbox>
                    <el-input-number size="small" :min="1" v-model="item.num"></el-input-number>
                  </div>
                </el-checkbox-group>
              </el-form-item>
            </div>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="exit">取 消</el-button>
            <el-button type="primary" @click="newaddtwo('alertForm')">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 编辑对话框 -->
        <el-dialog class="dialogBox" title="查看/编辑" :visible.sync="compile.newcompile" width="40%">
          <el-form :model="compile.form" :disabled="dis">
            <el-form-item label="排队编号" label-width="80px">
              <el-input v-model="compile.form.id" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="名称" label-width="80px">
              <el-input v-model="compile.form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="证件号码" label-width="80px">
              <el-input v-model="compile.form.idnumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" label-width="80px">
              <el-input v-model="compile.form.site" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" label-width="80px">
              <el-input v-model="compile.form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电子邮件" label-width="80px">
              <el-input v-model="compile.form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="业务选择" prop="type" label-width="80px">
              <el-input v-model="compile.form.type" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="compile.newcompile = false">取 消</el-button>
            <el-button type="primary" @click="bianji">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 列表按钮查看详情 -->
        <el-dialog class="dialogBox" title="业务详情查看" :visible.sync="businessDetails" width="40%">
          <div style="margin:-30px 0">
            <ul v-for="(item,index) in busDetailData" :key="index">
              <li class="bus-list">
                <span class="detail-name">{{item.name}}</span>
                数量：
                <el-tag effect="dark" size="small" type="success">{{item.number}}</el-tag>
              </li>
            </ul>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="medium" @click="businessDetails=false">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 分页 -->
        <el-pagination
          class="offlinePages"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10,20,30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import timeScope from "../../components/wDate";
export default {
  data() {
    //证件号码
    var idCard = (rule, value, callback) => {
      if (this.newph.form.idnumber === "") {
        callback(new Error("请输入身份证号"));
      } else {
        var idc = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        if (!idc.test(this.newph.form.idnumber)) {
          callback(new Error("请输入正确的身份证号"));
        }
        callback();
      }
    };
    //邮编
//    var mailnumber = (rule, value, callback) => {
//      if (this.newph.form.mailnumber === "") {
//        callback(new Error("请输入邮政编码"));
//      } else {
//        var mailnumber = /^[1-9][0-9]{5}$/;
//        if (!mailnumber.test(this.newph.form.mailnumber)) {
//          callback(new Error("请输入正确的邮政编码"));
//        }
//        callback();
//      }
//    };
      var mailnumber = (rule, value, callback) => {
          if (this.newph.form.mailnumber) {
              var mailnumber = /^[1-9][0-9]{5}$/;
              if (!mailnumber.test(this.newph.form.mailnumber)) {
                  callback(new Error("请输入正确的邮政编码"));
              }
              callback();
          }
      };
    //手机号
    // /^1[34578]\d{9}$/
    var phone = (rule, value, callback) => {
      if (this.newph.form.phone === "") {
        callback(new Error("请输入联系电话"));
      } else {
        var phone = /^1[34578]\d{9}$/;
        if (!phone.test(this.newph.form.phone)) {
          callback(new Error("请输入正确的联系电话"));
        }
        callback();
      }
    };
    //邮件
    var email = (rule, value, callback) => {
//      if (this.newph.form.email === "") {
//        callback(new Error("请输入电子邮件"));
//      } else {
//        var email = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
//        if (!email.test(this.newph.form.email)) {
//          callback(new Error("请输入正确的电子邮件"));
//        }
//        callback();
//      }
     if (this.newph.form.email ) {
         var email = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
         if (!email.test(this.newph.form.email)) {
             callback(new Error("请输入正确的电子邮件"));
         }
         callback();
      }
    };
    return {
      //弹框表单验证
      offlineFormRules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }], //名称
        idCard: [{ required: true, validator: idCard, trigger: "blur" }], //证件号码
          phone: [{ required: true, validator: phone, trigger: "blur" }], //联系电话
//        mailnumber: [
//          { required: true, validator: mailnumber, trigger: "blur" },
//        ], //邮政编码
//        site: [{ required: true, message: "请输入地址", trigger: "blur" }], //地址
//        email: [{ required: true, validator: email, trigger: "blur" }], //电子邮件
      },
      valNumDate: [],
      activeName: "1",
      pageSize: 10, // 页每页数据
      pageNum: 1, // 当前页
      total: 0, // 总数量

      formInline: {
        valNum: 1,
        startTime: "", // 开始时间
        endTime: "", // 结束时间
        orderNum: "", // 预约号
        name: "", // 申请人名字
        commitStatus: "", // 状态
      },
      value: "",
      options: [
        {
          value: "1",
          label: "待办结",
        },
        {
          // value: "6",
          value: "2",
          label: "已办结",
        },
      ],
      tableData: [
        // {
        //   dan_number: "202007160004",
        //   name: "王小虎",
        //   phone: "511325199904216969",
        //   submit_time: "2016-05-02",
        //   business_number: 1,
        // },
      ],
      tableDatas: [],
      tableDataJump: [],

      // 新增排号
      //新增排号数据
      newph: {
        newAppointment: false,
        newdata: {
          type: "身份证",
          imgtop: "",
          imgbottom: "",
        },
        form: {
          name: "",
          idnumber: "",
          mailnumber: "",
          site: "",
          phone: "",
          type: [],
          email: "",
          taskNum: [],
        },
        types: [],
        //第二步
        second: false,
      },
      //编辑
      compile: {
        newcompile: false,
        newcompiletwo: false,
        form: {
          id: "",
          number: "",
          name: "",
          idnumber: "",
          site: "",
          phone: "",
          type: 0,
          email: "",
        },
      },
      //是否可编辑
      dis: false,
      //24个业务
      optionses: [],
      // 业务详情对话框
      businessDetails: false,
      // 业务详情数据
      busDetailData: [{ name: "", number: "" }],
    };
  },

  methods: {
    //点击识别图片
    readidcard() {
      // console.log(this.socket)
      var strcmd = '{ "command": 10010}';
      this.socket.send(strcmd);
    },
    //识别图片返回信息
    openSocket() {
      this.socket = new WebSocket("ws://127.0.0.1:3417");
      this.socket.onmessage = (msg) => {
        var data = msg.data;
        if (typeof data === "string") {
          var obj = JSON.parse(data);
          if (obj.command == 20008) {
            if (obj.result) {
              this.newph.form.name = obj.Name;
              this.newph.form.idnumber = obj.IDNumber;
              this.newph.form.site = obj.Adress;
              this.newph.newdata.imgtop = "data:image/png;base64," + obj.image;
              this.newph.newdata.imgbottom =
                "data:image/png;base64," + obj.imageFull;
            } else {
              alert("获取失败");
            }
          }
        }
      };
    },
    //办结
    vault() {},
    newadd() {
      this.newph.newAppointment = false;
      this.newph.second = true;
    },
    //弹框确认
    newaddtwo() {
      this.$refs.alertForm.validate((valid) => {
        if (valid) {
          let proOrderNums = [];
          this.newph.types.forEach((element) => {
            this.newph.form.type.push(element.id);
            this.newph.form.taskNum.push(element.num);
            proOrderNums.push({ classId: element.id, orderNum: element.num });
          });
          if (proOrderNums.length <= 0) {
            return this.$message.error("请选择业务");
          }
          // let config = {
          //   headers: {
          //     "Content-Type": "multipart/form-data",
          //   },
          // };
          this.$http
            // .post("/trademark/proAppoint/addBackOrder", {
            .post(
              "/trademark/order/addBackOrder",
              {
                idCardName: this.newph.form.name, //名称
                idCardNum: this.newph.form.idnumber, //证件号码
                post: this.newph.form.mailnumber, //邮编
                idCardAddr: this.newph.form.site, //地址
                phone: this.newph.form.phone, //电话
                email: this.newph.form.email, //邮箱
                proOrderNums: JSON.stringify(proOrderNums), //业务选择 传递的json数组
                // classId: this.newph.form.type,  // 业务类型id
                // orderNum: this.newph.form.taskNum,  // 业务数量
              },
              { headers: { "Content-Type": "application/json" } }
            )
            .then((res) => {
              if (res.data.code == 200) {
                this.tabisshow();
                this.$message.success("新增成功");
                this.newph.second = false;
              } else {
                this.newph.second = true;
              }
            });
          this.newph.types = [];
          this.newph.form.name = "";
          this.newph.form.idnumber = ""; //证件号码
          this.newph.form.mailnumber = ""; //邮编
          this.newph.form.site = ""; //地址
          this.newph.form.phone = ""; //电话
          this.newph.form.email = ""; //邮箱
        } else {
          return false;
        }
      });
    },
    //弹框取消
    exit() {
      this.newph.types = [];
      this.newph.form.name = "";
      this.newph.form.idnumber = ""; //证件号码
      this.newph.form.mailnumber = ""; //邮编
      this.newph.form.site = ""; //地址
      this.newph.form.phone = ""; //电话
      this.newph.form.email = ""; //邮箱
      this.newph.second = false;
    },
    // 文件说明
    changeRxplain(file, fileList) {
      this.newph.newdata.imgfile = file.raw;
      this.newph.explainimg.push({
        name: file.name,
        url: file.url,
        id: file.uid,
      });
    },
    // 文件说明删除
    removeRxplain(file) {
      const index = this.newph.explainimg.findIndex(
        (el) => el.uid === file.uid
      );
      index !== -1 && this.newph.explainimg.splice(index, 1);
    },
    // 文件说明图片数量超出限制
    exceesLimitRxplain() {
      this.$message({
        type: "warning",
        message: "图片数量超出限制!",
      });
    },

    bianji() {
      this.compile.newcompile = false;
      const form = {
        id: this.compile.form.id,
        name: this.compile.form.name,
        identCode: this.compile.form.idnumber,
        postaCode: this.compile.form.mailnumber,
        address: this.compile.form.site,
        phoneNum: this.compile.form.phone,
        email: this.compile.form.email,
      };
      this.$http.post("/trademark/proAppoint/update", form).then((res) => {
        this.tabisshow();
      });
    },
    //tab事件调用的接口
    tabisshow() {
      if (this.activeName === "1") {
        // this.spanArr = [];
        // this.pos = 0;
        this.request();
        // this.getSpanArr(this.tableData);
      }
      if (this.activeName === "2") {
        // this.spanArr = [];
        // this.pos = 0;
        this.request();
        // this.getSpanArr(this.tableDatalater);
      }
      if (this.activeName === "3") {
        // this.spanArr = [];
        // this.pos = 0;
        this.request();
        // this.getSpanArr(this.tableDataskip);
      }
    },
    //24个业务
    business() {
      this.$http.get("trademark/class/findAll").then((res) => {
        res.data.data.forEach((item) => {
          item.num = 1;
        });
        this.options = res.data.data;
      });
    },

    val() {
      this.request(Number(this.activeName));
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
        } else {
          return false;
        }
      });
    },
    handleSizeChange(val) {
      // //console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.val();
    },
    handleCurrentChange(val) {
      // //console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.val();
    },
    //接收时间
    storeTime(startTime, endTime) {
      this.formInline.startTime = startTime;
      this.formInline.endTime = endTime;
    },
    //操作选择
    handleEdit(index, item, boolean, num) {
      boolean ? this.details(item) : this.skip(item, num);
    },
    skip(item, num) {
      // //console.log(item.order_Id)
      // this.$http.get(`/trademark/proPublic/finish/${num}`).then((result) => {
      //   this.request(Number(this.activeName));
      // });
      this.$http
        .get("/trademark/order/updateStatus", {
          params: {
            orderId: item.order_Id,
            status: num,
          },
        })
        .then((res) => {
          this.request(Number(this.activeName));
        });
    },
    // 查看详情按钮
    details(item) {
      //console.log(item);
      this.businessDetails = true; // 开启对话框
      this.$http
        .get("trademark/order/findBackDetl", {
          params: {
            orderId: item.order_Id,
          },
        })
        .then((response) => {
          if (response.data.code != 200)
            return this.message.error("查询不到数据");

          let resData = response.data.data || [];
          this.busDetailData = [];
          resData.forEach((item) => {
            let tmpObj = {};
            tmpObj["name"] = item.name;
            tmpObj["number"] = item.orderNum;
            this.busDetailData.push(tmpObj);
          });
        });
    },
    // 表格删除按钮
    handleEditDelet(index, row) {
      var confirm = this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((re) => {
          this.delOffline(index, row);
        })
        .catch((cancle) => cancle);
    },
    //删除
    delOffline(index, row) {
      let config = {
        header: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      this.$http
        .delete("/trademark/order/delOrder?orderId=" + row.order_Id)
        .then((res) => {
          if (res.data.code !== 200) {
            this.$message.error(res.data.message);
          } else {
            this.$message.success(res.data.message);
            this.request(Number(this.activeName)); // 删除成功更新列表
          }
        })
        .catch((error) => {});
    },
    //查询
    onSubmit(v, num = this.activeName) {
      if (this.formInline.commitStatus) {
        num = this.formInline.commitStatus;
        this.activeName = this.formInline.commitStatus;
      }
      if (isNaN(this.formInline.orderNum)) {
        return this.$message.error("请输入正确的预约号");
      }
      this.$http
        .get(
          // "/trademark/proPublic/findByType",
          "/trademark/order/listBackOrder",
          {
            params: {
              pageSize: this.pageSize,
              pageNum: this.pageNum,
              orderNum: this.formInline.orderNum, // 预约号
              idCardName: this.formInline.name, // 申请人
              status: num, // 办理状态
              orderBgDate: this.valNumDate[0],
              orderEdDate: this.valNumDate[1],
              // orderBgDate: this.formInline.startTime, // 开始日期
              // orderEdDate: this.formInline.endTime, //
              orderSr: 1, //  预约来源 ： 0 线上预约 1 线下预约
            },
          }
        )
        .then((result) => {
          let datble = [];
          let res = result.data;
          if (res.code != 200) return;

          // this.pageSize = res.data.pageSize;// 页每页数据

          // this.pageNum = res.data.pageNum; // 当前页

          this.total = res.data.total; // 总数量
          let data = res.data.list || []; // 表格数据
          data.forEach((item, index) => {
            datble.push({
              name: item.idCardName,
              phone: item.phone,
              submit_time: item.orderDate, // 预约时间
              business_number: item.orderSum, // 业务个数
              commitStatus: item.orderStatus, // 办理状态
              order_number: item.orderNum, // 预约号码
              order_Id: item.orderId, // 预约ID
            });
          });
          switch (Number(num)) {
            case 1:
              this.tableData = datble;
              break;
            case 2:
              this.tableDatas = datble;
              break;
          }
          // this.formInline.commitStatus = "";
        });
    },
    //重置按钮
    resetForm(formName) {
      // this.$set(this.formInline,this.formInline.startTime,"")
      // this.formInline.startTime = "";
      // this.formInline.endTime = "";
      this.valNumDate = [];
      this.$refs[formName].resetFields();
      this.formInline.valNum++;
    },
    //点击表单中清空按钮
    clear() {
      console.log(1);
    },
    request(Num = 1) {
      let url;
      let datble;
      url = "/trademark/order/listBackOrder";
      this.$http
        .get(url, {
          params: {
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            orderNum: this.formInline.orderNum, // 预约号
            appname: this.formInline.name, // 申请人
            status: Num, // 办理状态
            // orderBgDate: this.formInline.startTime, // 开始日期
            // orderEdDate: this.formInline.endTime, //
            orderBgDate: this.valNumDate[0],
            orderEdDate: this.valNumDate[1],
            orderSr: 1, //  预约来源 ： 0 线上预约 1 线下预约
          },
        })
        .then((result) => {
          let res = result.data;
          if (res.code != 200) return;

          // this.pageSize = res.data.pageSize;// 页每页数据

          // this.pageNum = res.data.pageNum; // 当前页

          this.total = res.data.total; // 总数量

          let data = res.data.list || []; // 表格数据

          datble = [];
          data.forEach((item, index) => {
            datble.push({
              // dan_number: item.orderNum,
              name: item.idCardName, // 申请人名
              phone: item.phone, // 手机号
              submit_time: item.orderDate, // 预约时间
              business_number: item.orderSum, // 业务个数
              commitStatus: item.orderStatus, // 办理状态
              order_number: item.orderNum, // 预约号码
              order_Id: item.orderId, // 预约ID
            });
          });
          switch (Num) {
            // 待办结
            case 1:
              this.tableData = datble;
              break;
            // 已办结
            case 2:
              this.tableDatas = datble;
              break;
            // 跳过项
            case 3:
              this.tableDataJump = datble;
              break;
          }
        });
    },
  },
  mounted() {
    this.openSocket();
    this.request();
    this.business(); // 24业务
  },
  components: {
    timeScope,
  },
};
</script>
<style lang="less" scoped>
.wrap {
  width: 100%;
  .search {
    .demo-form-inline {
      .demo-ruleForm {
        max-width: 600px;
        display: flex;
        justify-content: space-between;
      }
    }
    // 新增排号
    .add-num {
      margin-bottom: 20px;
    }
  }
  .offline-bottom {
    .offline-b-b {
      margin-top: 30px;
    }
    /deep/.el-table td,
    /deep/.el-table th {
      text-align: center;
    }
  }
  .offline {
    .dialogBox {
      // min-width: 500px;
      .el-select {
        width: 100%;
      }
    }
    .table {
      position: relative;
      min-height: 500px;
      .tiao {
        color: #fff;
        text-decoration: none;
      }
    }

    .s-imgs {
      margin-top: 22px;
      width: 70%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .imgs-top {
        // width: 45%;
        height: 90%;
        img {
          width: 100%;
        }
      }
      .imgs-bottom {
        height: 90%;
        img {
          width: 100%;
        }
      }
    }
  }
  .dialogBox {
    .bussi-box {
      max-height: 280px;
      overflow: auto;
    }
  }
  // 详情列表
  .bus-list {
    margin: 15px 0;
    border-top: 1px solid #ccc;
    font-size: 14px;
    color: #666;
    .detail-name {
      padding: 10px 0;
      display: block;
      word-spacing: normal;
    }
  }
}
.xzphFormContent {
  padding-left: 100px;
}
.operations {
  display: flex;
  justify-content: space-around;
}
.el-link {
  font-size: 12px;
}

.el-dialog {
  border: 1px solid red;
}
.el-form-item {
  margin: 0 30px 20px 0;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 250px !important;
}
</style>
